<template>
  <page-header-wrapper :title="false">
    <div>
      <a-row id="home_wrapper" type="flex">
        <a-col id="left_tree" flex="400px">
          <div>
            <!-- <a-tree checkable :show-line="true" :show-icon="false" :show-leaf-icon="false" :treeData="treeData" >
            </a-tree> -->
            <a-tree checkable :show-line="true" :show-icon="false" :show-leaf-icon="false" :treeData="orgAllTreeData" :replaceFields="orgTreereplaceFields" @select="onSelectOrgTree">
            </a-tree>
          </div>
        </a-col>
        <div style="width:10px"></div>
        <a-col flex="auto">
          <div id="right-content">
            <!-- 监控状况 -->
            <a-row>
              <a-card title="监控状况" :bordered="false">
                <a-row type="flex" :gutter="16">
                  <a-col :flex="1">
                    <a-statistic title="设备总数" :value="deviceCount.all" class="statistics-card">
                      <template #suffix> / 台 </template>
                    </a-statistic>
                  </a-col>
                  <a-col :flex="1">
                    <a-statistic title="运行设备" :value="deviceCount.run" class="statistics-card">
                      <template #suffix> / 台 </template>
                    </a-statistic> </a-col
                  ><a-col :flex="1">
                    <a-statistic title="故障设备" :value="deviceCount.fault" class="statistics-card">
                      <template #suffix> / 台 </template>
                    </a-statistic> </a-col
                  ><a-col :flex="1">
                    <a-statistic title="告警设备" :value="deviceCount.abnormal" class="statistics-card">
                      <template #suffix> / 台 </template>
                    </a-statistic> </a-col
                  ><a-col :flex="1">
                    <a-statistic title="离线设备" :value="deviceCount.offline" class="statistics-card">
                      <template #suffix> / 台 </template>
                    </a-statistic>
                  </a-col>
                </a-row>
              </a-card>
            </a-row>
            <!-- 告警状况：统计 + 明细 -->
            <a-row :gutter="12" :style="{ marginTop: '10px', height: '340px', overflow: 'hidden' }">
              <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
                <a-card
                  class="alarmCountCard"
                  style="height: 340px"
                  :loading="loading"
                  :bordered="false"
                  title="告警情况分析"
                >
                  <div slot="extra" style="height: inherit">
                    <div class="analysis-salesTypeRadio">
                      <a-radio-group :defaultValue="alarmCount.type" @change="changeAlarmCountType" size="small">
                        <a-radio-button value="1">24小时</a-radio-button>
                        <a-radio-button value="2">当月</a-radio-button>
                        <a-radio-button value="3">今年</a-radio-button>
                      </a-radio-group>
                    </div>
                  </div>
                  <div id="alarmEventCountOnDateDiv" style="height: 254px;width:100%">
                    <!-- <bar :data="alarmCount.data" /> -->
                  </div>
                </a-card>
              </a-col>
              <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
                <a-card class="alarm-event" style="height: 340px" :loading="loading" :bordered="false" title="告警信息">
                  <a slot="extra" @click="toMoreEvent">更多>></a>
                  <!-- 操作 -->
                  <div style="margin-bottom: 10px">
                    <a-radio-group
                      :default-value="alarmEventType"
                      button-style="solid"
                      @change="changeAlarmEventType"
                      size="small"
                    >
                      <a-radio-button value="1"> 设备告警 </a-radio-button>
                      <a-radio-button value="2"> 其他信息 </a-radio-button>
                    </a-radio-group>
                  </div>
                  <a-table
                    rowKey="id"
                    size="small"
                    v-if="alarmEventType === '1'"
                    :columns="operationColumns"
                    :dataSource="alarmEvent"
                    :pagination="false"
                  >
                  </a-table>
                  <a-table
                    rowKey="id"
                    size="small"
                    v-if="alarmEventType === '2'"
                    :columns="operationColumns"
                    :dataSource="otherEvent"
                    :pagination="false"
                  >
                  </a-table>
                </a-card>
              </a-col>
            </a-row>
            <!-- 全年数据统计 -->
            <a-row :gutter="12" :style="{ marginTop: '10px',height: '340px' }" >
              <a-col :xl="10" :lg="24" :md="24" :sm="24" :xs="24">
                <a-card
                  class="alarmCountCard"
                  style="height: 340px"
                  :loading="loading"
                  :bordered="false"
                  title="全年数据分析"
                >
                  <div slot="extra" style="height: inherit">
                    <div class="analysis-salesTypeRadio">
                      <a-radio-group :defaultValue="deviceTimeData.type" @change="changeDeviceTimeType" size="small">
                        <a-radio-button value="1">24小时</a-radio-button>
                        <a-radio-button value="2">当月</a-radio-button>
                        <a-radio-button value="3">今年</a-radio-button>
                      </a-radio-group>
                    </div>
                  </div>
                  <div>
                    <v-chart :force-fit="true" height="254" :data="deviceTimeData.data" :scale="pieScale">
                      <v-tooltip :showTitle="false" dataKey="item*percent" />
                      <v-axis />
                      <!-- position="right" :offsetX="-140" -->
                      <v-legend dataKey="item" />
                      <v-pie position="percent" color="item" :vStyle="pieStyle" />
                      <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                    </v-chart>
                  </div>
                </a-card>
              </a-col>
              <a-col :xl="14" :lg="24" :md="24" :sm="24" :xs="24">
                <a-card class="alarmCountCard" style="height: 340px" :loading="loading" :bordered="false" title="全年设备数据分析">
                  <div slot="extra" style="height: inherit">
                    <div class="analysis-salesTypeRadio">
                      <a-radio-group :defaultValue="stackDeviceCountData.type" @change="changeStackDeviceCountType" size="small">
                        <a-radio-button value="1">24小时</a-radio-button>
                        <a-radio-button value="2">当月</a-radio-button>
                        <a-radio-button value="3">今年</a-radio-button>
                      </a-radio-group>
                    </div>
                  </div>
                  <div id="stackDeviceCountDiv" style="height: 254px;width:100%"></div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import { Bar } from '@/components'
import { CarryOutOutlined } from '@/antd/icon'
import {treeTransArray} from '@/utils/util'
import { Empty } from 'ant-design-vue';
const DataSet = require('@antv/data-set')
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

const pieScale = [
  {
    dataKey: 'percent',
    min: 0,
    formatter: '.0%',
  },
]

const pieStyle = {
  stroke: '#fff',
  lineWidth: 1,
}

export default {
  name: 'Home',
  components: {
    Bar,
  },
  data() {
    return {
      orgAllTreeData: [],
      orgAllListData: [],
      orgTreeSelect:{},
      orgTreereplaceFields: {
        title: 'lable',
        key:'id',
        value:'id'
      },
      loading: false,
      deviceCount: {
        all: 0,
        normal: 0,
        fault: 0,
        abnormal: 0,
        offline: 0,
      },
      alarmCount: {
        type: '1',
        data: [],
      },
      treeData: [
        {
          title: '设备监控中心',
          key: '1',
          icon: <CarryOutOutlined />,
          children: [
            {
              title: '安徽精微科技有限公司',
              key: '2',
              icon: <CarryOutOutlined />,
              children: [
                {
                  title: '合肥市政管理处',
                  key: '3',
                  icon: <CarryOutOutlined />,
                  children: [
                    {
                      title: '设备1',
                      key: '4',
                      icon: <CarryOutOutlined />,
                    },
                    {
                      title: '设备2',
                      key: '5',
                      icon: <CarryOutOutlined />,
                    },
                  ],
                },
                {
                  title: '六安市政管理处',
                  icon: <CarryOutOutlined />,
                  key: '6',
                  children: [
                    {
                      title: '设备3',
                      icon: <CarryOutOutlined />,
                      key: '7',
                    },
                    {
                      title: '设备4',
                      icon: <CarryOutOutlined />,
                      key: '8',
                    },
                  ],
                },
              ],
            },
            {
              title: '合肥精微科技有限公司',
              key: 9,
              icon: <CarryOutOutlined />,
              children: [
                {
                  title: '芜湖市政管理处',
                  icon: <CarryOutOutlined />,
                  key: '10',
                  children: [
                    {
                      title: '设备5',
                      icon: <CarryOutOutlined />,
                      key: '11',
                    },
                    {
                      title: '设备6',
                      icon: <CarryOutOutlined />,
                      key: '12',
                    },
                  ],
                },
                {
                  title: '马鞍山市政管理处',
                  icon: <CarryOutOutlined />,
                  key: '13',
                  children: [
                    {
                      title: '设备7',
                      icon: <CarryOutOutlined />,
                      key: '14',
                    },
                    {
                      title: '设备8',
                      icon: <CarryOutOutlined />,
                      key: '15',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      alarmEventType: '1',
      alarmEvent: [],
      otherEvent: [],
      deviceTimeData: {
        type: '1',
        data: [],
      },
      pieScale,
      pieStyle,
      operationTabList: [
        {
          key: '1',
          tab: '设备告警',
        },
        {
          key: '2',
          tab: '其他信息',
        },
      ],
      operationActiveTabKey: '1',
      operationColumns: [
        {
          title: '发生时间',
          dataIndex: 'createdAt',
          key: 'createdAt',
        },
        {
          title: '告警设备',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
        },
        {
          title: '告警内容',
          dataIndex: 'remark',
          key: 'remark',
          ellipsis: true,
        },
      ],
      stackDeviceCountData: {
        type: '1'
      },
    }
  },
  mounted() {
    this.getOrgTree()
    this.getDeviceCount()
    this.getAlarmDeviceCount()
    this.getDeviceAlarmEvent()
    this.getDeviceCountByTime()
    this.getStackDeviceCountByTime()
  },
  methods: {
    getOrgTree() {
      this.$http.get('/web/common/getFullOrgTree').then((res) => {
        if(res.code == 0){
          this.orgAllListData = treeTransArray(JSON.parse(JSON.stringify(res.data)));
          this.orgAllTreeData = res.data
        }
      })
    },
    onSelectOrgTree(selectedKeys, info) {
      let selectOrgId = selectedKeys && selectedKeys.length > 0 ? selectedKeys[0] : '';
      if(!selectOrgId){
        this.orgTreeSelect = {};
      }else{
        //  判断选择的信息类型
        let item = this.orgAllListData.filter(i => i.id == selectOrgId)[0];
        if(item.type == 'ORG'){
          this.orgTreeSelect = {pOrgId:selectOrgId};
        }else if(item.type == 'PROJECT'){
          this.orgTreeSelect = {projectIds:selectOrgId};
        }
      }
      this.getDeviceCount()
      this.getAlarmDeviceCount()
      this.getDeviceAlarmEvent()
      this.getDeviceCountByTime()
      this.getStackDeviceCountByTime()
    },
    getDeviceCount() {
      let params = this.orgTreeSelect;
      this.$http.get('/web/index/getDeviceCount',{params}).then((res) => {
        if(res.code == 0){
          this.deviceCount = res.data
        }
      })
    },
    getAlarmDeviceCount() {
      const param = { dateType: this.alarmCount.type,...this.orgTreeSelect }
      this.$http.get('/web/index/getAlarmEventCountOnDate',{params:param}).then((res) => {
        if(res.code == 0){
          this.alarmCount.data = res.data
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById("alarmEventCountOnDateDiv"));
          // 指定图表的配置项和数据
          let option = {
            tooltip: {},
            xAxis: {
              type: 'category',
              data: []
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [],
                type: 'bar'
              }
            ]
          };
          for(let item of res.data){
            option.xAxis.data.push(item.x);
            option.series[0].data.push(item.y);
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      })
    },
    getDeviceAlarmEvent() {
      let params = this.orgTreeSelect;
      this.$http.get('/web/index/getAlarmEvent',{params}).then((res) => {
        if(res.code == 0){
          this.alarmEvent = res.data
        }
      })
    },
    getDeviceCountByTime() {
      const param = { dateType: this.deviceTimeData.type,...this.orgTreeSelect }
      this.$http.get('/web/index/getDeviceCount',{params:param}).then((res) => {
        if(res.code == 0){
          const deviceCount = []
          deviceCount.push({
            item:'正常',
            count: res.data.normal
          })
          deviceCount.push({
            item:'离线',
            count: res.data.offline
          })
          deviceCount.push({
            item:'故障',
            count: res.data.fault
          })
          deviceCount.push({
            item:'告警',
            count: res.data.abnormal
          })

          const dv = new DataSet.View().source(deviceCount)
          dv.transform({
            type: 'percent',
            field: 'count',
            dimension: 'item',
            as: 'percent'
          })
          const pieData = dv.rows
          this.deviceTimeData.data = pieData
        }
      })
      // this.$http.post('/device/getDeviceCountByTime', param).then((res) => {
      //   console.log(res.result)
      //   this.deviceTimeData.data = res.result
      // })
    },
    getStackDeviceCountByTime(){
      const param = { dateType: this.stackDeviceCountData.type,...this.orgTreeSelect }
      this.$http.get('/web/index/getDeviceCountOnDateAndModel',{params:param}).then((res) => {
        if(res.code == 0 && res.data){
          let result = res.data;
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById("stackDeviceCountDiv"));
          // 指定图表的配置项和数据
          let option = {
            legend:{data: []},
            tooltip: {},
            xAxis: {
              type: 'category',
              data: result.date
            },
            yAxis: {
              type: 'value'
            },
            series: [ ]
          };
          result.value.forEach(i => {
            option.legend.data.push(i.name);
            i.type = 'bar';
            option.series.push(i);
          });
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          this.stackDeviceCountData.show = true;
        }else{
          this.stackDeviceCountData.show = false;
        }
      })
      
    },
    changeAlarmCountType(e) {
      this.alarmCount.type = e.target.value
      this.getAlarmDeviceCount()
    },
    changeAlarmEventType(e) {
      this.alarmEventType = e.target.value
    },
    changeDeviceTimeType(e) {
      this.deviceTimeData.type = e.target.value
      this.getDeviceCountByTime()
    },
    changeStackDeviceCountType(e){
      this.stackDeviceCountData.type = e.target.value
      this.getStackDeviceCountByTime()
    },
    toMoreEvent(){
      this.$router.push('/device/deviceAlarmList')
    }
  },
}
</script>

<style lang="less" >
// .statistics-card {
//   background-color: white;
//   padding: 5px;
// }
// .alarm-event .ant-card-body {
//   padding-top: 10px !important;
// }

// .alarmCountCard .ant-card-extra {
//   padding: 6px 0 !important;
// }
</style>
